<script setup>
import { ref, reactive, computed } from 'vue';
import {
    ElCard, ElRow, ElCol, ElButton, ElTag, ElTable, ElTableColumn, ElTabs, ElTabPane,
    ElSelect, ElOption, ElBreadcrumb, ElBreadcrumbItem
} from 'element-plus';
import { ArrowLeft, RefreshRight, Search, Plus, Calendar, Star } from '@element-plus/icons-vue';

import TeamDetailDialog from './components/TeamDetailDialog.vue'; // 引入组件

import TeamDetailDialogMonth from './components/TeamDetailDialogMonth.vue'; // 引入组件

import MonthlyReport from "./components/MonthlyReport.vue"
import NextMonthPlan from "./components/NextMonthPlan.vue"
// --- 模拟数据 ---
const showReport = ref(false)
const NextMonthPlanState = ref(false)
const customData = ref({
    name: '李华',
    department: '市场部',
    // 其他自定义数据...
})

const handleApprove = (data) => {
    console.log('报表审核通过', data)
}

const handleReject = (data) => {
    console.log('报表被驳回', data)
}

const handleLoadData = (date) => {
    console.log('加载日期数据', date)
    // 实际项目中加载对应日期的报表数据
}
import { useRouter } from 'vue-router';
const router = useRouter();
const navback = () => {
    router.back();
};
// 顶部业绩指标数据
// 修复：将 ref 更改为 reactive，以避免构建环境对 ref(object) 语法的解析冲突。
const performanceData = reactive({
    responsibleBrands: 5,
    storeCount: 10,
    cumulativeRevenue: '10000.00', // 格式化为字符串以保持一致性
    cumulativePayout: '4000.00' // 格式化为字符串
});

// 表格数据 - 工作业绩表
const jobPerformanceList = ref([
    { id: 1, date: '2024.1', name: '张云东', role: '品牌经理', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 2, date: '2024.2', name: '李落施', role: '美容导师', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 3, date: '2024.3', name: '张丽', role: '店长', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 4, date: '2024.4', name: '王娜', role: '销售主管', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 5, date: '2024.5', name: '李红', role: '品牌经理', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 6, date: '2024.6', name: '王丽', role: '品牌经理', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
    { id: 7, date: '2024.7', name: '刘娜', role: '品牌经理', brand: 'gu!ci', cumulativeRevenue: 400000, cumulativePayout: 500, currentMonthTarget: 400000, completionProgress: '20%', actualRevenue: 4000, currentMonthPayout: 400 },
]);

// 表格数据 - 门店明细表 (简化)
const storeDetailList = ref([
    {
        id: 1,
        storeName: '南京新街口店',
        coBrand: "guiCi",
        cumulativeShipments: '累计出货',
        cumulativePayment: '累计回款',
        monthlyTarget: '当月目标',
        completionProgress: '完成进度',
        completionStatus: '完成状态'
    },
    {
        id: 2,
        storeName: '南京新街口店',
        coBrand: "guiCi",
        cumulativeShipments: '累计出货',
        cumulativePayment: '累计回款',
        monthlyTarget: '当月目标',
        completionProgress: '完成进度',
        completionStatus: '完成状态'
    },
    {
        id: 3,
        storeName: '南京新街口店',
        coBrand: "guiCi",
        cumulativeShipments: '累计出货',
        cumulativePayment: '累计回款',
        monthlyTarget: '当月目标',
        completionProgress: '完成进度',
        completionStatus: '完成状态'
    },
]);



// 活跃 Tab 键
const activeTab = ref('jobPerformance');

// Select 选项
const selectedGroup = ref('全部');
const groupOptions = ['全部', '华东区', '华南区', '华北区'];

// --- 样式和逻辑函数 ---

const handleDetail = (row) => {

    router.push({ path: '/system/employeeManagement/details', query: { employeeId: row.id } });

    console.log(`查看 ${row.name} 详情`);
};
// const handleUploadReport = (row) => { console.log(`上传 ${row.name} 日/月报`); };
const handleWorkReview = (row) => {
    console.log(`查看 ${row.name} 工作述职`);
    showReport.value = true;
};
const handlePlanning = (row) => { 
    console.log(row)
    NextMonthPlanState.value = true;
 };

const handleStoreDetail = (row) => { console.log(`查看门店 ${row.storeName} 详情`); };

// 底部导航按钮样式计算 (更精确地匹配图片颜色)
const getButtonClass = (type) => {
    switch (type) {
        case 'detail':
            return 'bg-[#409eff] hover:bg-[#66b1ff] text-white'; // Element Blue
        case 'report':
            return 'bg-[#67c23a] hover:bg-[#85ce61] text-white'; // Element Success
        case 'review':
            return 'bg-[#e6a23c] hover:bg-[#ebb563] text-white'; // Element Warning
        case 'planning':
            return 'bg-[#f56c6c] hover:bg-[#f89898] text-white'; // Element Danger
        default:
            return '';
    }
};

// 弹窗状态
const dialogVisible = ref(false);
const currentDetail = ref({});

// 弹窗状态 - 月报
const dialogVisibleMonth = ref(false);
const currentDetailMonth = ref({});

// 打开弹窗
const handleUploadReport = (row) => {
    currentDetail.value = { ...row };
    dialogVisible.value = true;
};

// 打开月份报弹窗
const handleUploadReportMonth = (row) => {
    currentDetail.value = { ...row };
    dialogVisibleMonth.value = true;
};

// 弹窗关闭回调
const handleDialogClose = () => {
    currentDetail.value = {};
};

// 弹窗关闭回调 - 月报
const handleDialogCloseMonth = () => {
    currentDetailMonth.value = {};
};

</script>

<template>
    <!-- Main Container -->
    <div class="page-container">

        <!-- Header / Breadcrumb and Return Button -->
        <div class="header-area">
            <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item>管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>业绩报表</el-breadcrumb-item>
      </el-breadcrumb> -->
            <el-button type="text" class="back-button" @click="navback">>>返回</el-button>
        </div>

        <!-- Filter and Group Select & Action Buttons --><el-row class="filter-actions-row">
            <el-col :span="12" class="flex items-center">
                <el-select v-model="selectedGroup" size="large" class="group-select">
                    <el-option v-for="item in groupOptions" :key="item" :label="item" :value="item" />
                </el-select>
            </el-col>
            <!-- <el-col :span="12" class="flex justify-end items-center space-x-2">
            <el-button :icon="Search" type="primary" size="large">查询</el-button>
            <el-button :icon="Plus" type="success" size="large" plain>新增</el-button>
        </el-col> -->
        </el-row>

        <!-- Top Performance Metrics Cards --><el-row :gutter="20" class="metric-cards-row">
            <!-- 负责的品牌 --><el-col :span="6">
                <el-card shadow="hover" class="metric-card">
                    <div class="metric-label">负责的品牌</div>
                    <div class="metric-value blue-text">{{ performanceData.responsibleBrands }}</div>
                </el-card>
            </el-col>
            <!-- 门店数量 --><el-col :span="6">
                <el-card shadow="hover" class="metric-card">
                    <div class="metric-label">门店数量</div>
                    <div class="metric-value blue-text">{{ performanceData.storeCount }}</div>
                </el-card>
            </el-col>
            <!-- 累计回款 --><el-col :span="6">
                <el-card shadow="hover" class="metric-card">
                    <div class="metric-label">累计回款</div>
                    <div class="metric-value green-text">¥{{ performanceData.cumulativeRevenue }}</div>
                </el-card>
            </el-col>
            <!-- 累计支出 --><el-col :span="6">
                <el-card shadow="hover" class="metric-card">
                    <div class="metric-label">累计支出</div>
                    <div class="metric-value red-text">¥{{ performanceData.cumulativePayout }}</div>
                </el-card>
            </el-col>
        </el-row>

        <!-- Tabbed Tables Area --><el-card class="table-container-card">
            <el-tabs v-model="activeTab" class="custom-tabs">
                <!-- Tab 1: 工作业绩表 --><el-tab-pane label="工作业绩表" name="jobPerformance">
                    <el-table :data="jobPerformanceList" style="width: 100%" border class="performance-table">
                        <el-table-column prop="date" label="日期" width="80" fixed />
                        <el-table-column prop="name" label="姓名" width="100" />
                        <el-table-column prop="role" label="职级" width="100" />
                        <el-table-column prop="brand" label="负责品牌" width="100" />
                        <el-table-column label="累计回款" width="120" sortable>
                            <template #default="{ row }">
                                <span class="text-blue-500">¥{{ row.cumulativeRevenue }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cumulativePayout" label="累计支出" width="120" sortable>
                            <template #default="{ row }">
                                <span class="text-red-500">¥{{ row.cumulativePayout }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="currentMonthTarget" label="当月目标任务" width="130" />
                        <el-table-column prop="completionProgress" label="任务完成进度" width="120">
                            <template #default="{ row }">
                                <el-tag size="small" type="success" effect="dark" class="rounded-sm">{{
                                    row.completionProgress }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="actualRevenue" label="实际回款金额" width="120" />
                        <el-table-column prop="currentMonthPayout" label="当月提款" width="100" />
                        <el-table-column label="操作" width="550" fixed="right">
                            <template #default="{ row }">
                                <el-button color="rgb(237, 85, 101)" :dark="false" plain
                                    @click="handleDetail(row)">明细</el-button>
                                <!-- <el-button @click="handleUploadReport(row)" color="rgb(35, 198, 200)" :dark="false"
                                    plain>上传日/月报</el-button> -->
                                <el-popover placement="right" :width="400" trigger="click">
                                    <!-- <template #reference>
        <el-button style="margin-right: 16px">Click to activate</el-button>
      </template> -->
                                    <el-table :data="gridData">
                                        <el-table-column width="150" property="date" label="date" />
                                        <el-table-column width="100" property="name" label="name" />
                                        <el-table-column width="300" property="address" label="address" />
                                    </el-table>
                                </el-popover>

                                <el-popover :width="300"
                                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; ">
                                    <template #reference>
                                        <el-button color="rgb(35, 198, 200)" :dark="false" plain>上传日/月报</el-button>
                                    </template>
                                    <template #default>
                                        <el-button type="primary" @click="handleUploadReport(row)">上传日报</el-button>
                                        <el-button type="warning" @click="handleUploadReportMonth(row)">上传月报</el-button>
                                    </template>
                                </el-popover>
                                <el-button @click="handleWorkReview(row)" color="rgb(35, 198, 200)" :dark="false"
                                    plain>查看工作月报</el-button>
                                <el-button @click="handlePlanning(row)" color="rgb(237, 85, 101)" :dark="false"
                                    plain>查看月总结+下月计划</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <!-- Tab 2: 门店明细表 --><el-tab-pane label="门店明细表" name="storeDetails">
                    <el-table :data="storeDetailList" border style="width: 100%" stripe>
                        <el-table-column prop="id" label="序号" width="80" align="center" />
                        <el-table-column prop="storeName" label="门店名称" align="center" />
                        <el-table-column prop="coBrand" label="合作品牌" align="center" />
                        <el-table-column prop="cumulativeShipments" label="累计出货" align="center" />
                        <el-table-column prop="cumulativePayment" label="累计回款" align="center" />
                        <el-table-column prop="monthlyTarget" label="当月目标" align="center" />
                        <el-table-column prop="completionProgress" label="完成进度" align="center" />
                        <el-table-column prop="completionStatus" label="完成状态" align="center" />
                        <el-table-column label="操作" fixed="right" width="120" align="center">
                            <template #default="{ row }">
                                <el-button size="small" type="primary" plain
                                    @click="handleStoreDetail(row)">查看明细</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>


        <!-- 引入明细弹窗组件 -->
        <TeamDetailDialog v-model:visible="dialogVisible" :detail-data="currentDetail"
            :title="`${currentDetail.name || ''}的工作日报`" @close="handleDialogClose" />

        <TeamDetailDialogMonth v-model:visible="dialogVisibleMonth" :detail-data="currentDetailMonth"
            :title="`${currentDetailMonth.name || ''}的工作月报`" @close="handleDialogCloseMonth" />
        <!-- 查看工作月报 -->

        <!-- 查看工作日报 -->
        <!-- 工作报表弹窗组件 -->
        <MonthlyReport v-model="showReport" dialog-width="1000px" @approve="handleApprove" @reject="handleReject"
            @load-data="loadReportData" />
        <!-- :initial-data="reportData"    -->
        <!-- 下月计划 -->
        <NextMonthPlan v-model="NextMonthPlanState" dialog-width="1000px"  />
    </div>
</template>

<style scoped>
.page-container {
    padding: 20px;
    background-color: #f0f2f5;
    /* 页面背景色 */
    min-height: 100vh;
}

/* Header Area (面包屑 + 返回按钮) */
.header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-area :deep(.el-breadcrumb__item) .el-breadcrumb__inner {
    color: #606266;
    font-weight: normal;
}

.header-area :deep(.el-breadcrumb__item):last-child .el-breadcrumb__inner {
    color: #303133;
    font-weight: bold;
}

.back-button {
    font-size: 14px;
    color: #409eff;
    padding: 0;
}

/* Filter and Actions Row (下拉框 + 查询/新增按钮) */
.filter-actions-row {
    margin-bottom: 20px;
}

.group-select {
    width: 120px;
}

.group-select :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding-left: 0;
    height: 40px;
    /* 确保高度一致 */
}

.group-select :deep(.el-input__inner) {
    font-size: 20px;
    /* 大小和图片一致 */
    font-weight: bold;
    color: #303133;
    height: 40px;
    line-height: 40px;
}

.filter-actions-row .el-button {
    height: 40px;
    /* 与选择框高度对齐 */
    font-size: 14px;
}


/* Top Performance Metrics Cards */
.metric-cards-row {
    margin-bottom: 20px;
}

.metric-card {
    --el-card-padding: 20px;
    border-radius: 8px;
    border-left: 5px solid;
    /* 左侧颜色条 */
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.metric-label {
    color: #909399;
    /* 浅灰色文字 */
    font-size: 14px;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 30px;
    /* 增大字体 */
    font-weight: bold;
    /* 加粗 */
}

/* 各卡片左侧颜色 */
.el-col:nth-child(1) .metric-card {
    border-left-color: #409eff;
}

/* 品牌 - 蓝色 */
.el-col:nth-child(2) .metric-card {
    border-left-color: #67c23a;
}

/* 门店 - 绿色 */
.el-col:nth-child(3) .metric-card {
    border-left-color: #e6a23c;
}

/* 回款 - 黄色 */
.el-col:nth-child(4) .metric-card {
    border-left-color: #f56c6c;
}

/* 支出 - 红色 */

/* 字体颜色 */
.blue-text {
    color: #409eff;
}

.green-text {
    color: #67c23a;
}

.red-text {
    color: #f56c6c;
}


/* Tabbed Tables Area */
.table-container-card {
    --el-card-padding: 0px;
    /* 移除卡片内边距，让tab内容紧贴边缘 */
    border-radius: 8px;
    overflow: hidden;
    /* 确保圆角和内容裁剪 */
}

/* Custom Tabs Styles */
.custom-tabs {
    padding: 0 20px;
    /* Tab内容区域的左右边距 */
}

/* Tab头部 */
.custom-tabs :deep(.el-tabs__header) {
    margin-bottom: 0;
    border-bottom: none;
    /* 移除底部横线 */
    padding: 10px 0 0 0;
}

.custom-tabs :deep(.el-tabs__nav-wrap::after) {
    display: none;
    /* 彻底移除下划线 */
}

.custom-tabs :deep(.el-tabs__active-bar) {
    height: 3px;
    /* 激活条高度 */
    background-color: #409eff;
    /* 激活条颜色 */
    border-radius: 2px;
}

.custom-tabs :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: 500;
    color: #909399;
    /* 未激活Tab文字颜色 */
    padding: 0 10px;
    margin-right: 30px;
    height: 45px;
    line-height: 45px;
    transition: color 0.3s ease;
}

.custom-tabs :deep(.el-tabs__item.is-active) {
    color: #303133;
    /* 激活Tab文字颜色 */
    font-weight: bold;
}

.custom-tabs :deep(.el-tabs__item:hover) {
    color: #409eff;
    /* 鼠标悬浮颜色 */
}

/* Tab Content */
.custom-tabs :deep(.el-tabs__content) {
    padding: 20px 0px 20px 0px;
    /* Tab内容区域上下边距 */
}

/* Table Styles */
.performance-table {
    /* 表格本身没有左右边距，内边距通过 Tab content 的 padding 控制 */
}

.performance-table :deep(.el-table__header-wrapper) th {
    background-color: #f7f9fc !important;
    color: #606266;
    font-weight: bold;
    font-size: 13px;
    height: 48px;
    /* 表头高度 */
    text-align: center;
    /* 表头文字居中 */
}

.performance-table :deep(.el-table__cell) {
    padding: 8px 0;
    /* 单元格内边距 */
    text-align: center;
    /* 单元格文字居中 */
    font-size: 13px;
    color: #606266;
}

/* 操作按钮样式 */
.action-button {
    border: none !important;
    /* 移除 Element Plus 默认边框 */
    color: white !important;
    /* 强制白色文字 */
    padding: 6px 10px;
    margin: 3px 2px;
    /* 按钮间距 */
    border-radius: 4px;
    font-size: 12px;
    min-width: unset;
    /* 移除最小宽度限制 */
}

.action-button:hover {
    opacity: 0.9;
}

/* 进度标签样式 */
.performance-table .el-tag.rounded-sm {
    border-radius: 3px;
}
</style>
